<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mine</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
    <script src="./js/jq.js"></script>
</head>

<body class="pd20">

    <div class="mine flex_x end">
        <img src="./static/image/mineicon.png" alt="">
    </div>
    <div class="title">Already booked flight</div>
    <div class="desc">Please arrive at the airport two hours in advance</div>
    <div class="f_list">
        <div class="f_item">
            <div class="f_top flex_x between">
                <div class="t_left flex_y"><span>BeiJing</span> <span>DaXing T2</span></div>
                <img src="./static/image/image 1.png" alt="">
                <div class="t_left flex_y"><span>Kuala Lumpur</span> <span>Kuala LumpurT2 T2</span></div>

            </div>
            <div class="f_middle flex_x between mt_20">
                <div class="m_left flex_y"> <span>Depart</span><span>08:25</span></div>
                <div class="line"></div>
                <div class="flights flex_y between">
                    <img src="./static/image/flight.png" alt="">
                    <span>5h 0m</span>
                </div>
                <div class="line"></div>
                <div class="m_right"> <span>08:25</span></div>
            </div>
            <div class="f_bottom flex_x between mt_20">
                <div class="b_left flex_y txt_center">
                    <span>3</span>
                    <span>Terminal</span>
                </div>
                <div class="b_left flex_y txt_center">
                    <span>12</span>
                    <span>Gate</span>
                </div>
                <div class="b_left flex_y txt_center">
                    <span>MF832</span>
                    <span>Flight</span>
                </div>

            </div>
        </div>
    </div>
    <div class="m_title flex_x start">
        <img src="./static/image/m1.png" alt="">
        Personal details
    </div>
    <div class="m_item">
        <div class="mt flex_x between">
            <div class="m_left">
                <div class="mm_t">Account</div>
                <div class="mm_desc">Mange your name, email and password.</div>
            </div>
            <img src="./static/image/righticon.png" alt="">
        </div>
        <div class="mt flex_x between" style="border: none;margin-top: 8px;">
            <div class="m_left">
                <div class="mm_t">Preferences</div>
                <div class="mm_desc">Customize your search preferences to see <br>
                    more of the results you want.</div>
            </div>
            <img src="./static/image/righticon.png" alt="">
        </div>
    </div>
    <div class="m_title flex_x start">
        <img src="./static/image/m2.png" alt="">
        Personal trips
    </div>
    <div class="m_item">
        <div class="mt flex_x between">
            <div class="m_left">
                <div class="mm_t">Trip planning</div>
            </div>
            <img src="./static/image/righticon.png" alt="">
        </div>
        <div class="mt flex_x between" style="margin-top: 8px;">
            <div class="m_left">
                <div class="mm_t">Bookings</div>
            </div>
            <img src="./static/image/righticon.png" alt="">
        </div>
        <div class="mt flex_x between" style="border: none;margin-top: 8px;">
            <div class="m_left">
                <div class="mm_t">Price Alerts</div>
            </div>
            <img src="./static/image/righticon.png" alt="">
        </div>
    </div>


    <div class="bottom flex_x around bg_ff">
        <a href="./home.html"><img src="./static/image/3.png" alt=""></a>
        <a href="./Exploring.html"><img src="./static/image/Vector (2).svg" alt=""></a>
        <img src="./static/image/mine.png" alt="">
    </div>
</body>
<style>
    .mm_t {
        font-size: 14px;
    }

    .mm_desc {
        color: #666;
        font-size: 10px;
    }

    .mt {
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #999;
    }

    .m_item {
        width: 328px;
        height: 125px;
        border-radius: 6px;
        border: 1px solid #000;
        margin: 0 auto;
        margin-top: 10px;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .m_item img {
        width: 7px;
        height: 11px;
    }

    .m_title img {
        width: 12px;
        height: 14.857px;
        margin-right: 4px;
    }

    .m_title {
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        margin-top: 30px;
    }

    .b_left span:nth-child(1) {
        font-size: 11px;
    }

    .b_left span:nth-child(2) {
        color: #000;
        font-size: 10px;
        opacity: 0.5;
    }

    .f_middle {
        align-items: center;
    }

    .f_btns {
        width: 62px;
        height: 26px;
        border-radius: 5px;
        background: #FF8906;
        color: #fff;
        text-align: center;
        line-height: 26px;
    }

    .like {
        width: 12px;
        height: 10.019px;
    }

    .f_item .f_top img {
        width: 45.933px;
        height: 45.261px;
        border-radius: 50%;
        margin-left: 56px;
    }

    .flights img {
        width: 20px;
        height: 20.038px;
    }

    .flights span {
        font-size: 10px;
        opacity: 0.5;
    }

    .t_left span:nth-child(1),
    .m_right {
        font-size: 18px;
    }

    .m_left span:nth-child(1) {
        font-size: 10px;
        opacity: 0.5;
    }

    .m_left span:nth-child(2) {
        font-size: 18px;

    }

    .t_left span:nth-child(2) {
        font-size: 10px;
        opacity: 0.5;
    }

    .line {
        width: 67px;
        height: 2px;
        background-color: #999;

        opacity: 0.2;
    }

    .f_item {
        padding: 12px;
        box-sizing: border-box;
        width: 90vw;
        margin: 20px auto;
        border-radius: var(--spacing-2, 8px);
        background: #FFF;
    }

    .f_list {
        margin-top: 20px;
    }

    .mine img {
        width: 33.102px;
        height: 32.788px;
    }

    .pd20 {
        padding: 20px;
        box-sizing: border-box;
    }

    .title {
        font-size: 24px;
    }

    .desc {
        font-size: 15px;
        margin-top: 11px;
    }
</style>
<script>
    gsap.from(".mine img", {
        duration: .5,
        y: 200,
    });
</script>

</html>